<!-- /*
 * @Author: RDSunday 
 * @Date: 2020-03-16 17:07:34 
 * @Last Modified by:   RDSunday 
 * @Last Modified time: 2020-03-16 17:07:34 
 */ -->
<!-- 进度条实例 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #myProgress {
            width: 100%;
            background-color: #ddd;
        }
    
        #myBar {
            width: 1%;
            height: 30px;
            line-height: 30px;
            background-color: #4CAF50;
            text-align: center;
            color: white;
        }
    </style>
    </head>
    
    <body>
        <h1>JavaScript 进度条</h1>
    
        <div id="myProgress">
            <div id="myBar"></div>
        </div>
    
        <br>
        <button onclick="move()">点我</button>
        <script>
            function move() {
                var elem = document.getElementById("myBar");
                var width = 1;
                var id = setInterval(frame, 10);//定时器
                function frame() {
                    if (width >= 100) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%'; 
                        elem.innerHTML = width * 1 + '%';
                    }
                }
            }
        </script>

    
</body>
</html>